<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    .box1{
        /* 一个盒模型的大小由内边距、外边距、内容区共同决定 */
        /* 
        内容区(content):元素中所有的文本和子元素都在内容区中排列
           内容区的大小有width和height两个部分来设置
              width 设置内容区的宽度
              height 设置内容区的高度
         */
        width: 200px;
        height: 200px;
        background-color: aquamarine;
        /*
        边框(border):属于盒子的边缘，边框里面属于盒子的内部，除了边框都是盒子的外部
        要设置边框，至少设置三个样子：
           边框的宽度 border-width
           边框的颜色 border-color
           边框的样式 border-style
         */
        border-width: 10px;
        /* 默认值是三个像素
           四个方向，(顺序)上右下左
           三个方向：上 左右 下
           两个值：上下 左右
           border-xxx-width
           top,right,bottom,left
        */
        border-color: antiquewhite;
        /* 边框颜色也可以有四个，如果不指定则默认使用color颜色值 */
        border-style:solid;
        /* 
        solid 实线
        dotted 点状
        dashed 虚线
        */
        /* border简写属性border:xxx xxx xxx */
        padding-left: 3%;
        padding-right: 3%;
        padding-top: 3%;
        padding-bottom: 3%;
        /* 内边距的设置会影响盒子的大小，背景颜色会延伸到内边距上，几个值同上*/
        margin-top: 50px;
        margin-bottom: 50px;
        margin-left: 50px;
        margin-right: 50px;    
        /* margin也可以是负值，如果是负值也可以向负方向移动 */
    }

    .outer{
        width: 800px;
        height: 200px;
        bottom: 10px rgb(96, 226, 135) solid;
    }
    .inner{
        width: 200px;
        height: 200px;
        background-color: aquamarine;
        /* 
        元素水平方向的布局有几个元素共同决定
           A margin-left
           B border-left
           C width
           D padding-right
           E border-right
           F margin-right
        一个元素在父元素中，水平布局满足以下等式
        父元素内容区的宽度=A+B+C+D+E+F
           如果存在auto使auto调整使等式成立
           如果等式不成立则成为自动约束，使等式自动调整
        */
    }
    .gaodubuju{
        margin-top: 200px;
        width: 500px;
        height: 500px;
        background-color: aqua;
        /* 子元素的大小如果超过了父元素，则子元素从父元素中移除，通过overflow设置*/
        overflow: visible;
        /* visible 允许溢出 
           hidden  隐藏
           scorll  生成滚动条以查看完整的内容
           auto    根据需要生成滚动条
        */
    
    }
</style>
</head>
<body>
    <!-- 
        盒子模型、盒子模型、框模型(box model)
           -css将页面中的所有元素都设置成为了一个矩形的盒子
           -将元素设置为矩形的盒子后，对页面的布局就变成了将不同的盒子摆放到不同德位置
           -每一个盒子都由以下几个部分组成
              内容区(content)：负责装盒子的内容
              内边距(padding)
              边框(border)
              外边距(margin)

        水平布局：
     -->
     <div class="box1">box1</div>
     <div class="outer">outer
         <div class="inner"></div>
     </div>
     <div class="gaodubuju">
         <div class="inner"></div>
         <div class="inner"></div>
     </div>
</body>
</html>